<template>
  <view class="news-list">
    <!-- 分类标签 -->
    <scroll-view 
      scroll-x 
      class="category-bar"
      :show-scrollbar="false"
    >
      <view 
        class="category-item"
        v-for="(item, index) in categories"
        :key="index"
        :class="{ active: currentCategory === item.value }"
        @tap="selectCategory(item.value)"
      >
        <text>{{ item.name }}</text>
      </view>
    </scroll-view>
    
    <!-- 资讯列表 -->
    <scroll-view 
      scroll-y 
      class="news-scroll"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view class="news-wrapper">
        <view 
          class="news-item"
          v-for="(item, index) in newsList"
          :key="index"
          @tap="viewNews(item)"
        >
          <!-- 大图模式 -->
          <template v-if="item.type === 'large'">
            <image :src="item.image" mode="aspectFill" class="large-image" />
            <view class="content">
              <text class="title">{{ item.title }}</text>
              <view class="meta">
                <text class="tag" v-if="item.tag">{{ item.tag }}</text>
                <text class="time">{{ item.time }}</text>
                <text class="views">{{ item.views }}阅读</text>
              </view>
            </view>
          </template>
          
          <!-- 小图模式 -->
          <template v-else>
            <view class="content">
              <text class="title">{{ item.title }}</text>
              <text class="desc">{{ item.description }}</text>
              <view class="meta">
                <text class="tag" v-if="item.tag">{{ item.tag }}</text>
                <text class="time">{{ item.time }}</text>
                <text class="views">{{ item.views }}阅读</text>
              </view>
            </view>
            <image :src="item.image" mode="aspectFill" class="small-image" />
          </template>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadMoreStatus"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中...',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 分类列表
const categories = [
  { value: 'all', name: '全部' },
  { value: 'notice', name: '通知公告' },
  { value: 'health', name: '健康科普' },
  { value: 'service', name: '就医服务' },
  { value: 'special', name: '专科介绍' },
  { value: 'expert', name: '专家风采' }
]

// 当前分类
const currentCategory = ref('all')

// 资讯列表
const newsList = ref([
  {
    id: 1,
    type: 'large',
    title: '澳门镜湖医院引进最新达芬奇手术机器人，提升微创手术水平',
    image: '/static/news/news1.jpg',
    tag: '医院动态',
    time: '2024-03-25',
    views: 1580
  },
  {
    id: 2,
    title: '春季养生指南：中医专家教你调理身体',
    description: '春季养生重在养肝，专家建议从饮食、运动等多方面入手，助您轻松养生。',
    image: '/static/news/news2.jpg',
    tag: '健康科普',
    time: '2024-03-24',
    views: 2360
  },
  {
    id: 3,
    type: 'large',
    title: '医院举办"世界睡眠日"主题义诊活动',
    image: '/static/news/news3.jpg',
    tag: '活动资讯',
    time: '2024-03-23',
    views: 986
  }
])

// 加载状态
const refreshing = ref(false)
const loadMoreStatus = ref('more')

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category
  refreshing.value = true
  // 这里调用加载数据API
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  // 这里调用刷新API
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value !== 'more') return
  loadMoreStatus.value = 'loading'
  
  // 这里调用加载更多API
  setTimeout(() => {
    loadMoreStatus.value = 'noMore'
  }, 1000)
}

// 查看资讯详情
const viewNews = (news) => {
  uni.navigateTo({
    url: `/pages/news/detail?id=${news.id}`
  })
}
</script>

<style lang="scss">
.news-list {
  min-height: 100vh;
  background: $bg-color;
  
  .category-bar {
    background: #fff;
    white-space: nowrap;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .category-item {
      display: inline-block;
      padding: 12rpx 30rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-lg;
      
      &.active {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  .news-scroll {
    height: calc(100vh - 112rpx);
  }
  
  .news-wrapper {
    padding: 20rpx;
  }
  
  .news-item {
    background: #fff;
    border-radius: $radius-lg;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .large-image {
      width: 100%;
      height: 360rpx;
    }
    
    .small-image {
      width: 200rpx;
      height: 160rpx;
      border-radius: $radius-lg;
      flex-shrink: 0;
    }
    
    .content {
      padding: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .desc {
        font-size: 28rpx;
        color: $text-regular;
        margin-bottom: 16rpx;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .meta {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: $text-secondary;
        
        .tag {
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 16rpx;
        }
        
        .time {
          margin-right: 16rpx;
        }
      }
    }
    
    &:not(:has(.large-image)) {
      display: flex;
      padding: 20rpx;
      
      .content {
        flex: 1;
        padding: 0;
        margin-right: 20rpx;
      }
    }
    
    &:active {
      transform: scale(0.99);
    }
  }
}
</style>